<template>
	<view>
		<u-sticky bgColor="#209eff" :enable="true">
			<u-tabs :list="tabsList" :is-scroll="false" active-color="#ffffff" :current="tabsCurrent"
				@change="tabsChange"></u-tabs>
		</u-sticky>
		<view v-if="tabsCurrent === 0">
			<van-calendar v-model:show="show" :poppable="false" :show-title="false" :show-confirm="false" :min-date="minDate"
			:max-date="maxDate"
			:allow-same-day="true" :first-day-of-week='1' :style="{ height: '400px' }" @select="sekectData"/>
			<view class="no-class" v-if="classList.length === 0">
				暂无预约班级~
			</view>
			<view class="has-class" v-else>
					<view class="ha-container" v-for="(item,index) in classList" :key="index">
						<view class="ha-course">
							{{item.classVo.courseName}}
						</view>
						<view class="ha-pai">
							<view class="pai-left">
								排班课程：
							</view>
							<view class="pai-right">
								{{item.classVo.name}}
							</view>
						</view>
						<view class="ha-pai">
							<view class="pai-left">
								上课时间：
							</view>
							<view class="pai-right">
								{{currentDate}};{{item.classVo.startTime}}-{{item.classVo.stopTime}}
							</view>
						</view>
						<view class="ha-pai">
							<view class="pai-left">
								上课老师：
							</view>
							<view class="pai-right">
								{{item.classVo.bishopTeacherOneNickName}}
							</view>
						</view>
						<view class="ha-pai">
							<view class="pai-left">
								上课教室：
							</view>
							<view class="pai-right">
								{{item.classVo.classroomName}}
							</view>
						</view>
						<view class="ha-pai">
							<view class="pai-left">
								剩余座位：
							</view>
							<view class="pai-right">
								不限
							</view>
						</view>
						<view class="yuyue-button" @click="appointButton(item)">
							立即预约
						</view>
					</view>
		
			</view>
		</view>
			<u-popup v-model="knowShow" mode="bottom" border-radius="14" length="50%" @close="closePopup">
				<view class="tiem">{{currentDate}};{{appointInfo.classVo.startTime}}-{{appointInfo.classVo.stopTime}}</view>
				<view class="coursename">{{appointInfo.classVo.courseName}}</view>
				<u-form :model="form" ref="uForm">
				<u-form-item prop="course" label-width="200rpx" label="预约课程" required="true">
					<u-input v-model="form.courseName" @click="courseShowBtn" placeholder="请选择课程" />
				</u-form-item>
				<u-select v-model="courseShow" :list="courseList" @confirm="confirm"></u-select>
				</u-form>
			</u-popup>
		<view v-if="tabsCurrent === 1">
			<view class="no-audition" v-if="auditionList">
				暂无预约！
			</view>
			<view class="has-audition" v-else>
				1111
				<view class="ha-container">
					<view class="ha-course">
						dv
					</view>
					<view class="ha-pai">
						<view class="pai-left">
							排班课程
						</view>
						<view class="pai-right">
							测试宿命
						</view>
					</view>
					<view class="ha-pai">
						<view class="pai-left">
							排班课程
						</view>
						<view class="pai-right">
							测试宿命
						</view>
					</view>
					<view class="ha-pai">
						<view class="pai-left">
							排班课程
						</view>
						<view class="pai-right">
							测试宿命
						</view>
					</view>
					<view class="ha-pai">
						<view class="pai-left">
							排班课程
						</view>
						<view class="pai-right">
							测试宿命
						</view>
					</view>
					<view class="ha-pai">
						<view class="pai-left">
							排班课程
						</view>
						<view class="pai-right">
							测试宿命
						</view>
					</view>
				
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
	schoolTraineeAboutClass,aboutClassCalendarList,schoolTraineeAboutClassRequst,getAllCourseList
	} from '@/utils/api.js'
import { CellGroup } from 'vant';
	export default {
		data() {
			return {
				show:true,
				minDate:new Date(),
				maxDate: new Date(),
				tabsList: [{
						name: '预约上课',
						disabled: false
					},
					{
						name: '我的预约',
						disabled: false
					},
				],
				tabsCurrent: 0,
				classList:[],
				courseList:[],
				auditionList:null,
				currentDate:'',
				knowShow:false,
				courseShow:false,
				form: {
					traineeCourseId:'',
					courseName:'',
					calendarId:'',
				},
				appointInfo:{},
				rules: {
					courseName: [{
						required: true,
						message: '请选择课程',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		created() {
			 let nowDat = new Date();
			    let dateY = nowDat.getFullYear();
			    let dateM = nowDat.getMonth();
			    let dateD = nowDat.getDate();
			    this.minDate = new Date();
			    this.maxDate = new Date(dateY , dateM, dateD +15);
			
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(){
			this.getCourseList()
			this.currentDate = this.$moment().startOf('day').format('YYYY-MM-DD')
			console.log("value0",this.currentDate);
		},
		methods: {
			confirm(e) {
				console.log("2", e);
				this.form.courseName = e[0].label
				this.form.traineeCourseId = e[0].value
			},
			courseShowBtn() {
				console.log("22");
				this.courseShow = true
			
			},
			async getAllCourseList() {
				const res = await getAllCourseList()
			       
				this.courseList= res.data.map(v => {
					return {
						
						value: v.id,
						label: v.name
					}
				})
				console.log("this.courseList1111",this.courseList);
			},
			sekectData(value){
				console.log("value0",this.$moment(value).format('YYYY-MM-DD'));
				this.currentDate = this.$moment(value).format('YYYY-MM-DD')
				this.getCourseList()

			},
			async getCourseList(){
				uni.showLoading()
				const res = await aboutClassCalendarList()
				if(res.code == 200){
					uni.hideLoading()
				    this.classList = res.data.filter(item=>item.goClassDate === this.currentDate)
					console.log(" this.classList", this.classList);
				}
			 	
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				console.log("index",index);
				if(index === 1){
					this.schoolTraineeAboutClass()
				}else{
					this.getCourseList()
				}
			
			},
			change(e) {
				console.log(e);
			},
			async schoolTraineeAboutClass(){
				uni.showLoading()
				const data = {
					pageSize:999,
					pageNum:1,
				}
				const res = await schoolTraineeAboutClass(data)
				if(res.code == 200){
					uni.hideLoading()
					this.auditionList = res.rows
				}
			    
			},
			appointButton(item){
			this.getAllCourseList()
			this.knowShow = true
			this.appointInfo = item
			this.form.calendarId = item.id
			}
			
		}
	}
</script>

<style scoped lang="scss">
::v-deep .u-tabs-scroll-flex {
		background-color: #228dff;
	}
	.no-class{
		text-align: center;
		margin-top: 50rpx;
		color: #908d8d;
	}
	.no-audition{
		text-align: center;
		margin-top: 50rpx;
		color: #908d8d;
	}
	.ha-container{
		width: 90%;
		margin: 10rpx auto;
		background-color: #fff;
		padding: 20rpx;
	}
	.ha-course{
		font-weight: bold;
		font-size: 32rpx;
	}
	.ha-pai{
		display: flex;
	}
	.pai-left{
		width: 150rpx;
		color: #b6b6b6;
	}
	.yuyue-button{
		width: 180rpx;
		padding: 10rpx;
		background-color: #d9293d;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		margin-left: 70%;
	}
</style>
